<template>
	<view>
		<!-- <view class="chupiao1_s" style="">

		</view>
		<view class="chupia_s" style="" @click="dyok">
			<view class="" v-for="(item, index) in 3" :key="index" style="margin-top: 20rpx;">
				<view class="chupiao_qingwu3">
					订单号：A2023101654067732600
				</view>
				<view class="chupiao_qingwu3" style="font-size: 60rpx;">
					订单号：A2023101654067732600
				</view>
				<view class="chupiao_qingwu3" style="font-size: 60rpx;">
					姓名：体育馆健身票（教职工）
				</view>
				<view class="chupiao_qingwu3" style="font-size: 60rpx;">
					姓名：体育馆健身票（教职工）
				</view>
				<view class="chupiao_qingwu3" style="font-size: 60rpx;">
					姓名：体育馆健身票（教职工）
				</view>
				<view class="chupiao_qingwu3" style="font-size: 60rpx;">
					姓名：体育馆健身票（教职工）
				</view>
				<view class="chupiao_qingwu3" style="font-size: 60rpx;">
					姓名：体育馆健身票（教职工）
				</view>
				<view class="chupiao_qingwu3" style="font-size: 60rpx;">
					姓名：体育馆健身票（教职工）
				</view>
				<view class="chupiao_qingwu3" style="font-size: 60rpx;">
					姓名：体育馆健身票（教职工）
				</view>
				<view class="chupiao_qingwu3">
					姓名：体育馆健身票（教职工）
				</view>
				<view class="chupiao_qingwu3">
					姓名：体育馆健身票（教职工）
				</view>
				<view class="chupia_sw">
					<uqrcode :ref="'uqrcode' + index" :canvas-id="'qrcode' + index" size="100" :value="cardno"
						:options="{ margin: 10 }"></uqrcode>
				</view>
			</view>
		</view> -->

		<!-- 
		<view class="chupiao1_s" style="">

		</view>
		<view class="chupia_s" style="">
			<view class="" v-for="(item, index) in 3" :key="index" style="margin-top: 20rpx;">
				<view class="chupiao_qingwu3" style="font-size: 60rpx;">
					订单号：A2023101654067732600
				</view>
				<view class="chupiao_qingwu3" style="font-size: 60rpx;">
					姓名：体育馆健身票（教职工）
				</view>
				<view class="chupiao_qingwu3" style="font-size: 60rpx;">
					姓名：体育馆健身票（教职工）
				</view>
				<view class="chupiao_qingwu3" style="font-size: 60rpx;">
					姓名：体育馆健身票（教职工）
				</view>
				<view class="chupiao_qingwu3" style="font-size: 60rpx;">
					姓名：体育馆健身票（教职工）
				</view>
				<view class="chupiao_qingwu3" style="font-size: 60rpx;">
					票
				</view>
				<view class="chupiao_qingwu3" style="font-size: 60rpx;">
					票
				</view>
				<view class="chupiao_qingwu3" style="font-size: 60rpx;">
					票
				</view>
				<view class="chupia_sw">
					<uqrcode :ref="'uqrcode' + index" :canvas-id="'qrcode' + index" size="100" :value="cardno"
						:options="{ margin: 10 }"></uqrcode>
				</view>
			</view>
		</view> -->


		<view class="chupia_s">
			<view class="chupia_d" v-for="(item, index) in 2" :key="index" style="margin-top: 100rpx;" id="printMe" >
				<view style="font-size: 40rpx;font-weight: 700;">
					遥观
				</view>

				<view class="chupiao_qingwu3">
					日期：2022-10-10
				</view>
				<view class="chupiao_qingwu3">
					操作员：某某某
				</view>
				<view class="" style="display: flex;flex-direction: row;margin-top: 40rpx;">
					<view class="chupiao_qingwu4" style="width: 15vw;">
						序
					</view>
					<view class="chupiao_qingwu4" style="width: 45vw;">
						消费项目
					</view>
					<view class="chupiao_qingwu4" style="width: 15vw;">
						单价
					</view>
					<view class="chupiao_qingwu4" style="width: 15vw;">
						数量
					</view>
				</view>
				<view class="" style="display: flex;flex-direction: row;">
					<view class="chupiao_qingwu4" style="width: 15vw;">
						1
					</view>
					<view class="chupiao_qingwu4" style="width: 45vw;">
						游泳
					</view>
					<view class="chupiao_qingwu4" style="width: 15vw;">
						30
					</view>
					<view class="chupiao_qingwu4" style="width: 15vw;">
						1
					</view>
				</view>

				<view class="" style="display: flex;flex-direction: row;margin-top: 40rpx;">
					<view class="chupiao_qingwu3">
						支付方式:元
					</view>
					<view class="chupiao_qingwu3" style="margin-left: 40rpx;">
						应收:30元
					</view>
					<view class="chupiao_qingwu3" style="margin-left: 40rpx;">
						实收:30元
					</view>
				</view>

				<view class="chupia_sw" style="margin-top: 40rpx;margin-left: 15rpx;">
					<uqrcode :ref="'uqrcode' + index" :canvas-id="'qrcode' + index" size="100" :value="cardno"
						:options="{ margin: 10 }"></uqrcode>
				</view>
			</view>
			<button type="default" @click="getclick" style="width: 400rpx;height: 150rpx;font-size: 60rpx;">打印</button>
		</view>
	</view>
</template>

<script>
	import {
		getAllNoByUser
	} from '@/common/api';
	export default {
		data() {
			return {
				xiaopiao: false,
				cardno: '234788859745294',
				index: 0,
				listse: [],
			};
		},
		onLoad(e) {
			// this.gete()
			console.log(e)
			// this.clickhexiao();

		},
		mounted() {},
		methods: {
			async gete() {
				getAllNoByUser({
						// type: this.court,
						// no: this.detailstyle,
						type: 1,
						no: '15365504091',
						output: 'json'
					})
					.then(res => {
						console.log(res, '222')
						this.listse = res
						setTimeout(() => {
							// window.print();
							print(document.getElementById('printMe'))
						}, 2000)
					})
			},
			getclick(){
				setTimeout(() => {
					// window.print();
					print(document.getElementById('printMe'))
				}, 1000)
			},
			clickhexiao() {
				setTimeout(() => {
					// uni.navigateBack({
					// 		delta:2,//返回层数，2则上上页
					// 	})
				}, 1000)
			}
		}
	};
</script>

<style lang="scss" scoped>
	.d-back {
		height: 100%;
		height: 100vh;
		background: rgb(47, 127, 255);
	}

	.d-tag {
		background: #f3f3f3;
		border-radius: 4rpx;
		height: 36rpx;
		font-size: 24rpx;
		font-weight: 500;
		color: #333333;
		padding: 0 18rpx;
	}

	.d-be {
		color: #bebebe;
	}

	.d-red {
		color: #ffffff;
		margin-top: 10rpx !important;
	}

	.d-white {
		color: #ffffff;
		margin-top: 10rpx !important;
	}

	.d-xuxian {
		width: 100%;
		height: 1rpx;
		border-bottom: 1px dashed white;
		margin-top: 10rpx;
	}

	.d-bold {
		font-weight: bold;

	}

	.fav {
		background: linear-gradient(0deg, rgba(96, 187, 251, 0) 31%, #60BBFB 100%);
	}

	.list {
		.scroll-view_H {
			height: 33vw;
			overflow: hidden;
		}

		.item {
			margin-top: 30rpx;
			height: 9vw;
			width: 96%;
			border: 2rpx solid #60BBFB;
			padding: 0 10rpx;
			margin-left: 1.5%;

			.info {
				margin-left: 20rpx;
				flex-direction: row;
				display: flex;

				.name {
					font-size: 70rpx;
					font-weight: 500;
					color: #ffffff;
					margin-left: 40rpx;
					width: 20vw;
					text-align: center;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.phone {
					font-size: 70rpx;
					font-weight: 500;
					color: #ffffff;
					margin-left: 40rpx;
					width: 20vw;
					text-align: center;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}

			.info1 {
				margin-left: 20rpx;
				flex-direction: row;
				display: flex;

				.name1 {
					width: 20vw;
					font-size: 80rpx;
					font-weight: 600;
					color: #ffffff;
					margin-left: 40rpx;
					text-align: center;
				}

				.phone1 {
					width: 20vw;
					font-size: 80rpx;
					font-weight: 600;
					color: #ffffff;
					margin-left: 40rpx;
					text-align: center;
				}
			}
		}
	}

	.chupiao1 {
		width: 100vw;
		height: 100%;
		background-color: #ffffff;
		position: absolute;
		z-index: 998;
		top: 0;
		opacity: 0.5;
	}

	.chupiao1_s {
		width: 100vw;
		height: 100%;
		background-color: #ffffff;
		position: absolute;
		z-index: 998;
		top: 0;
		opacity: 1;
	}

	.chupia_s {
		width: 100vw;
		height: auto;
		background: #eeeeee;
		// border: 1px solid;
		// background: linear-gradient(0deg, #0093C3 30%, rgba(68, 163, 252, 0.8) 100%);
		// border-image: linear-gradient(0deg, #0093C3, #6FDBFF, #0093C3) 10 10;
		position: absolute;
		z-index: 999;
		top: 2%;
		// left: 22%;
		display: flex;
		flex-direction: column;
		// justify-content: center;
		// align-items: center;
		// padding: 10rpx 50rpx;
		font-size: 30rpx;

		.chupia_d {
			margin-top: 5vw;

			.chupia_sw {
				display: flex;
				flex-direction: column;
				// justify-content: center;
				// align-items: center;
			}


			.chupiao_qingwu3 {
				margin-top: 1vw;
				font-size: 4vw;
				color: #000000;
				font-size: 30rpx;
			}

			.chupiao_qingwu4 {
				margin-top: 1vw;
				font-size: 4vw;
				color: #000000;
				font-size: 30rpx;
				width: 15vw;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				display: flex;
				// flex-direction: column;
				justify-content: center;
				align-items: center;
			}
		}

		.chupia_sw {
			display: flex;
			flex-direction: column;
			// justify-content: center;
			// align-items: center;
		}


		.chupiao_qingwu3 {
			margin-top: 1vw;
			font-size: 4vw;
			color: #000000;
			font-size: 30rpx;
		}
	}

	.chupiao {
		width: 552px;
		height: 450px;
		// background: #0086df;
		// border: 1px solid;
		background: linear-gradient(0deg, #0093C3 30%, rgba(68, 163, 252, 0.8) 100%);
		// border-image: linear-gradient(0deg, #0093C3, #6FDBFF, #0093C3) 10 10;
		position: absolute;
		z-index: 999;
		top: 40%;
		left: 24%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		/* 相对父元素水平居中 */
		align-items: center;
		/*  子元素相对父元素垂直居中 */

		.chupiao_qingwu {
			font-size: 5vw;
			color: #FF0000;
		}

		.chupiao_qingwu1 {
			font-size: 4vw;
			color: #FEFEFE;
			margin-top: 1vw;
		}

		.chupiao_qingwu2 {
			font-size: 3vw;
			color: #FFFFFF;
			margin-top: 1vw;
		}

		.chupiao_qingwu3 {
			margin-top: 1vw;
			font-size: 4vw;
			color: #FFFFFF;
		}

		.chupiao_jindu {
			width: 70%;
			height: 4vw;
			margin-top: 2vw;
		}
	}
</style>